<template>
  <n-modal v-model:show="show"
           class="w-11/12 max-w-md rounded-3xl"
           preset="card"
           :bordered="false">
    <n-tabs type="segment" animated>
      <n-tab-pane name="邮箱登录" tab="邮箱登录">
        <EmailAuthView></EmailAuthView>
      </n-tab-pane>
      <n-tab-pane name="微信扫码登录" tab="微信扫码登录">
        <WechatAuthView></WechatAuthView>
      </n-tab-pane>
      <n-tab-pane name="用户名登录" tab="用户名登录">
        <UsernameAuthView></UsernameAuthView>
      </n-tab-pane>
    </n-tabs>

  </n-modal>
</template>

<script setup lang="ts">

import {storeToRefs} from "pinia";
import {useWebSocketStore} from "@/store/module/webSocket";
import { useUserStore} from "@/store/module/user";
import {useAppStore} from "@/store/module/app";
import UsernameAuthView from "@/components/pc/view/UsernameAuthView.vue";
import {computed, onMounted} from "vue";
import EmailAuthView from "@/components/pc/view/EmailAuthView.vue";
import WechatAuthView from "@/components/pc/view/WechatAuthView.vue";

const {authModalShow} = storeToRefs(useAppStore())
const {isLogin} = storeToRefs(useUserStore())
const webSocketStore = useWebSocketStore()
onMounted(() => {
  webSocketStore.connect()
})

const show = computed({
  get() {
    return authModalShow.value && isLogin.value
  },
  set(val: any) {
    authModalShow.value = val
  }
})


</script>

<style scoped>

</style>